<template>
	<view>
		<view class="verification-mobile">
			<view class="join-btn flex-content" @click="getphone" v-if="join">
				立即加盟
			</view>
		</view>
			<u-popup v-model="showphone" @close="closepopup" mode="center" negative-top="50" border-radius="20" :mask-close-able="false"  :closeable="true">
				<!-- 输入手机号接受验证码弹窗start -->
				<!-- <view class="bg-white phone-popup p-l-60 p-t-38 p-r-60" id='tanchuang' > -->
				<view class="bg-white p-l-60 p-t-38 p-r-60 phone-popup" id='tanchuang' >
					<!-- 输入手机号准本接收验证码 -->
					<view class="" v-if="!smstype">
						<view class="f-s-40">
							输入手机号
						</view>
						<view class="m-t-40">
							<u-input v-model="phone" type="number" maxlength="11" placeholder="请输入您的手机号登录" />	
						</view>
						<view class="next-step flex-content m-t-60" @click="getSmsCode">
							下一步
						</view>
						<view class=" flex m-t-40 p-l-22" style="width: 630rpx;">
							<view class="is-affirm flex-content" v-if="isAgree" @click="closeisAgree">
								<u-icon name="checkmark" color="#fff"></u-icon>
							</view>
							<view class="no-affirm" @click="isIsAgree" v-else></view>
							<view class="need-know">
								我已经阅读且表示同意 
							</view>
							<router-link to="/bundle/pages/server_explan/server_explan?type=1">
								<view class="primary">用户协议、</view>
							</router-link>
							和
							<router-link to="/bundle/pages/server_explan/server_explan?type=0">
								<view class="primary">隐私条款</view>
							</router-link>
						</view>
					</view>
					<!-- 输入手机号准备接受验证码end -->					
				</view>
				<!-- 输入手机号接受验证码弹窗end -->
			</u-popup>
			
			<view :class="popup">
				<!-- 输入验证码内容start-->
				<view class="" v-if="smstype">
					<view class="f-s-40">
						请输入验证码
					</view>
					<view class="content-telephone m-t-40">
						验证码已发送至 {{phone}}
					</view>
					<view class="m-t-40">
						<view class="message-input">
							<u-message-input  width="90" :breathe="false" @finish="finishfn"></u-message-input>
						</view>
					</view>
					<view @click="getsms" class="verification-yzm flex-content m-t-60 p-r-60" >
						{{updataButtonStatus.text}}
					</view>	
				</view>
				<!-- 输入验证码end -->
			</view>
			
			
	</view>
</template>

<script>
	import {
		sendSms,
		verificationcode
	} from '@/api/app'
	import {
		SMSType
	} from '@/utils/type'
	export default {
		data() {
			return {
				phone:"",
				smstype:false,
				showphone:"",
				isAgree:false,
				join:true,
				timer:null,
				updataButtonStatus:{
					status:false,
					text:"60s后可重新获取",
				
				},
				popup:"code-popup-none",
				disnone:"",
			};
		},
		beforeDestroy() {
			this.timer=null
		},
		methods:{
			countDown(){
				this.updataButtonStatus.status=true
				  if(this.timer) { clearInterval(this.timer); }
				        let time = 60
				      this.timer = setInterval(() => {
				          time--;
				          if(time == 0) {
				            clearInterval(this.timer)
				            this.updataButtonStatus.text='重新获取'
							  this.updataButtonStatus.status=false
				          }else{
				            this.updataButtonStatus.text = `${time}s后可重新获取`   // es5 '倒计时' + time + '秒'
				          }
				        }, 1000)
			},
			
			// 点击立即加盟调用此函数
			getphone(){
				// 显示提示框
				this.showphone=true
				this.join=false
			},
			closeisAgree(){
				this.isAgree=false
			},
			isIsAgree(){
				this.isAgree=true
			},
			// 输入验证码后调用此函数
			getsms(){	
				if( this.updataButtonStatus.status=false){
					sendSms({mobile: this.info.mobile, key: SMSType.RZYZ}).then(res => {
					    if(res.code == 1) {
					       this.smstype=true
						   this.countDown()
					    }
						})
				}else{
					this.$toast({
						title: '请填稍后获取'
					})
				}
			},
			closepopup(){
				this.join=true
			},
			getSmsCode(){
				if (!this.phone) {
					this.$toast({
						title: '请填写手机号信息',
					});
					return
					}
					if(!this.isAgree){
						this.$toast({
							title: '请同意协议'
						})
						return
					}
				sendSms({mobile: this.phone, key: SMSType.RZYZ}).then(res => {
				    if(res.code == 1) {
				        this.smstype=true;
						this.popup="code-popup-block";
						this.showphone=false;
					   this.countDown()
				    }
				})
				 return;
			},
		async finishfn(res){
			
				let req={
					mobile:this.phone,
					 m_code:res
				}
			let res1=await verificationcode(req)
			if(res1.code==1){
				uni.navigateTo({
					url:"bundle/pages/dr_apply/dr_apply?phone="+this.phone
				})
			}else{
				this.$toast({
					title: '验证码错误'
				})
			}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.verification-yzm {
		height:100rpx ;
		color: #666666;
		font-size: 30rpx;
	}
.verification-mobile{
		.join-btn{
			width: 100%;
			height: 126rpx;
			color: #FFFFFF;
			background-color: #E85631 ;
			position: fixed;
			bottom: 0px;
		}
		width: 100%;
		background-color: #FFFFFF !important;
		min-height: 100vh;
		background: url(https://vkceyugu.cdn.bspapp.com/VKCEYUGU-2cb47d34-0bce-4d35-acf7-2c76729b8c27/4a121085-c30c-4610-ac67-666bf4bfdfe1.png) no-repeat;
		background-size: 102%;
		
	}
	.phone-popup{
		width: 718rpx;
		height: 572rpx;
		
	}
	.code-popup-block{
		display:block;
		width: 100%;
		height: 100%;
		border-radius: 0rpx;
		background:#fff;
		padding:50rpx;
		position:absolute;
		top:0;
		
	}
	.next-step{
		width: 630rpx;
		height: 100rpx;
		border-radius: 80rpx;
		color: #FFFFFF;
		font-size: 40rpx;
		background-color: #E85631;
	}
	.need-know{
		color: #B3B3B3;
	}
	.is-affirm{
		width: 40rpx;
		margin-right: 16rpx;
		height: 40rpx;
		border-radius: 49rpx;
		background-color: #F72E2E;
	}
	.no-affirm{
		width: 40rpx;
		margin-right: 16rpx;
		height: 40rpx;
			border-radius: 49rpx;
		border: 3rpx solid #dadada;
	}
</style>
